<template>
  <div class="deep-process-detail">
        <el-button style="float: right;" @click="onDelete">删除</el-button>
        <el-button style="float: right;" @click="onEditBase">修改基本信息</el-button>
        <el-button style="float: right;" @click="onExport">导出溯源码</el-button>
       
    <!-- 顶部信息区 -->
    <div class="top-info">
      <el-row gutter="24">
        <el-col :span="4">
          <el-image :src="productImg" class="main-img" fit="cover" />
        </el-col>
        <el-col :span="20">
          <div class="product-title">{{ baseInfo.name }}</div>
          <el-row class="product-meta">
            <el-col :span="12">生产批次：{{ baseInfo.batch }}</el-col>
            <el-col :span="12">保质期：{{ baseInfo.shelfLife }} 天</el-col>
            <el-col :span="12">生产许可证号：{{ baseInfo.license }}</el-col>
            <el-col :span="12">生产企业：{{ baseInfo.company }}</el-col>
          </el-row>
        </el-col>
      
         
      </el-row>
    </div>

    <!-- 产品检验报告 -->
    <div class="section">
    <el-row>
    <el-col :span="4">
    </el-col>
    <el-col :span="16">
        <div class="section-title">产品检验报告</div>
      <div class="img-list">
        <div v-for="(img, idx) in reportImgs" :key="idx" class="img-item">
          <el-image :src="img.url" class="img-thumb" fit="cover" />
          <el-icon class="img-delete" @click="removeImg(reportImgs, idx)"><Close /></el-icon>
        </div>
        <el-upload
          class="img-upload"
          :show-file-list="false"
          :on-change="e => handleImgUpload(e, reportImgs)"
        >
          <div class="img-thumb img-upload-btn"><el-icon><Plus /></el-icon></div>
        </el-upload>
      </div>
    </el-col>
    </el-row>

      
    </div>

    <!-- Tab栏 -->
    <el-tabs v-model="activeTab" class="tabs">
      <el-tab-pane label="养殖信息 (5/5)" name="farming"></el-tab-pane>
      <el-tab-pane label="屠宰信息 (5/5)" name="slaughter"></el-tab-pane>
      <el-tab-pane label="深加工信息 (0/5)" name="deep">
        <!-- 深加工信息分组描述 -->
        <div class="tab-section">
          <div class="group-title">
            <span class="blue-title">深加工信息</span>
            <el-button size="small" class="section-btn" @click="editDeepDialog = true">设置</el-button>
          </div>
          <div class="deep-info-row">
            <div class="deep-info-col">
              <div class="info-item"><span class="info-label">班组：</span>{{ deepInfo.team }}</div>
            </div>
            <div class="deep-info-col">
              <div class="info-item"><span class="info-label">负责人：</span>{{ deepInfo.owner }}</div>
            </div>
          </div>
        </div>
        <!-- 食品安全信息 -->
        <div class="tab-section">
          <div class="group-title">
            <span class="blue-title">食品安全信息</span>
          </div>
          <div class="img-list">
            <div v-for="(img, idx) in foodSafeImgs" :key="idx" class="img-item">
              <el-image :src="img.url" class="img-thumb" fit="cover" />
              <el-input v-model="img.label" size="small" class="img-label" placeholder="输入标签" />
              <el-icon class="img-delete" @click="removeImg(foodSafeImgs, idx)"><Close /></el-icon>
            </div>
            <el-upload
              class="img-upload"
              :show-file-list="false"
              :on-change="e => handleImgUpload(e, foodSafeImgs, true)"
            >
              <div class="img-thumb img-upload-btn"><el-icon><Plus /></el-icon></div>
            </el-upload>
          </div>
        </div>
        <!-- 供应商信息 -->
        <div class="tab-section" v-for="(supplier, sidx) in supplierList" :key="sidx">
          <div class="group-title">
            <span class="blue-title">{{ supplier.title }}</span>
            <el-button size="small" class="section-btn" @click="openSupplierEdit(sidx)">设置</el-button>
          </div>
          <div class="info-item"><span class="info-label">生产批次：</span>{{ supplier.batch }}</div>
          <div class="info-item">相关材料：</div>
          <div class="img-list">
            <div v-for="(img, idx) in supplier.imgs" :key="idx" class="img-item">
              <el-image :src="img.url" class="img-thumb" fit="cover" />
              <el-input v-model="img.label" size="small" class="img-label" placeholder="输入标签" />
              <el-icon class="img-delete" @click="removeSupplierImg(sidx, idx)"><Close /></el-icon>
            </div>
            <el-upload
              class="img-upload"
              :show-file-list="false"
              :on-change="e => handleSupplierImgUpload(e, sidx)"
            >
              <div class="img-thumb img-upload-btn"><el-icon><Plus /></el-icon></div>
            </el-upload>
          </div>
        </div>
        <!-- 企业信息 -->
        <div class="tab-section">
          <div class="group-title">
            <span class="blue-title">企业信息</span>
            <el-button size="small" class="section-btn" @click="editCompanyDialog = true">设置</el-button>
          </div>
          <div class="company-info-row">
            <div class="company-info-col">
              <div class="info-item"><span class="info-label">公司名称：</span>{{ companyInfo.name }}</div>
            </div>
            <div class="company-info-col">
              <div class="info-item"><span class="info-label">生产许可证号：</span>{{ companyInfo.license }}</div>
            </div>
          </div>
        </div>
        <!-- 企业照片 -->
        <div class="tab-section">
          <div class="section-title">企业照片</div>
          <div class="img-list">
            <div v-for="(img, idx) in companyImgs" :key="idx" class="img-item">
              <el-image :src="img.url" class="img-thumb" fit="cover" />
              <el-icon class="img-delete" @click="removeImg(companyImgs, idx)"><Close /></el-icon>
            </div>
            <el-upload
              class="img-upload"
              :show-file-list="false"
              :on-change="e => handleImgUpload(e, companyImgs)"
            >
              <div class="img-thumb img-upload-btn"><el-icon><Plus /></el-icon></div>
            </el-upload>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 深加工信息编辑弹窗 -->
    <el-dialog v-model="editDeepDialog" title="深加工信息" width="500px" :close-on-click-modal="false">
      <el-form :model="deepForm" :rules="deepRules" ref="deepFormRef" label-width="100px" label-position="left">
        <el-form-item label="班组" prop="team" required>
          <el-input v-model="deepForm.team" />
        </el-form-item>
        <el-form-item label="负责人" prop="owner" required>
          <el-input v-model="deepForm.owner" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onSaveDeep">保存</el-button>
      </template>
    </el-dialog>
    <!-- 企业信息编辑弹窗 -->
    <el-dialog v-model="editCompanyDialog" title="企业信息" width="500px" :close-on-click-modal="false">
      <el-form :model="companyForm" :rules="companyRules" ref="companyFormRef" label-width="100px" label-position="left">
        <el-form-item label="公司名称" prop="name" required>
          <el-input v-model="companyForm.name" />
        </el-form-item>
        <el-form-item label="生产许可证号" prop="license" required>
          <el-input v-model="companyForm.license" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onSaveCompany">保存</el-button>
      </template>
    </el-dialog>
    <!-- 供应商信息编辑弹窗 -->
    <el-dialog v-model="editSupplierDialog" title="供应商信息" width="500px" :close-on-click-modal="false">
      <el-form :model="supplierForm" :rules="supplierRules" ref="supplierFormRef" label-width="100px" label-position="left">
        <el-form-item label="生产批次" prop="batch" required>
          <el-input v-model="supplierForm.batch" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onSaveSupplier">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Plus, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const productImg = ref('https://img.yzcdn.cn/vant/cat.jpeg')
const reportImgs = ref([
  { url: 'https://img.yzcdn.cn/vant/cat.jpeg' },
])
const foodSafeImgs = ref([
  { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '人员卫生检查' },
  { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '抽样报告' },
])
const companyImgs = ref([
  { url: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { url: 'https://img.yzcdn.cn/vant/cat.jpeg' },
])
const baseInfo = reactive({
  name: '兔头（麻辣味）',
  batch: '20210718',
  shelfLife: 90,
  license: 'SC213205427680',
  company: '成都爱吃兔食品加工有限公司',
})
const deepInfo = reactive({
  team: '生产1组',
  owner: '小陈',
})
const supplierList = ref([
  {
    title: '原料',
    batch: '20210718',
    imgs: [
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '检验报告' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '进厂检验记录' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '供应商资质' },
    ],
  },
  {
    title: '辅料',
    batch: '20210718',
    imgs: [
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '检验报告' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '进厂检验记录' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '供应商资质' },
    ],
  },
  {
    title: '添加剂',
    batch: '20210718',
    imgs: [
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '检验报告' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '进厂检验记录' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '供应商资质' },
    ],
  },
  {
    title: '包材',
    batch: '20210718',
    imgs: [
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '检验报告' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '进厂检验记录' },
      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', label: '供应商资质' },
    ],
  },
])
const companyInfo = reactive({
  name: '四川锦祥食品有限公司',
  license: 'SC213205427680',
})
const activeTab = ref('deep')

// 编辑弹窗相关
const editDeepDialog = ref(false)
const deepFormRef = ref()
const deepForm = reactive({
  team: '',
  owner: '',
})
const deepRules = {
  team: [{ required: true, message: '请输入班组', trigger: 'blur' }],
  owner: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
}
function onSaveDeep() {
  deepFormRef.value.validate((valid:any) => {
    if (valid) {
      Object.assign(deepInfo, deepForm)
      editDeepDialog.value = false
      ElMessage.success('保存成功')
    }
  })
}
const editCompanyDialog = ref(false)
const companyFormRef = ref()
const companyForm = reactive({
  name: '',
  license: '',
})
const companyRules = {
  name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  license: [{ required: true, message: '请输入生产许可证号', trigger: 'blur' }],
}
function onSaveCompany() {
  companyFormRef.value.validate((valid:any) => {
    if (valid) {
      Object.assign(companyInfo, companyForm)
      editCompanyDialog.value = false
      ElMessage.success('保存成功')
    }
  })
}
// 供应商编辑弹窗
const editSupplierDialog = ref(false)
const supplierFormRef = ref()
const supplierForm = reactive({
  batch: '',
})
const supplierRules = {
  batch: [{ required: true, message: '请输入生产批次', trigger: 'blur' }],
}
const currentSupplierIdx = ref(-1)
function openSupplierEdit(idx:any) {
  currentSupplierIdx.value = idx
  supplierForm.batch = supplierList.value[idx].batch
  editSupplierDialog.value = true
}
function onSaveSupplier() {
  supplierFormRef.value.validate((valid:any) => {
    if (valid && currentSupplierIdx.value > -1) {
      supplierList.value[currentSupplierIdx.value].batch = supplierForm.batch
      editSupplierDialog.value = false
      ElMessage.success('保存成功')
    }
  })
}
// 图片上传/删除
function handleImgUpload(e:any, arr:any, withLabel = false) {
  const file = e.raw
  const reader = new FileReader()
  reader.onload = ev => {
    arr.push(withLabel ? { url: ev.target?.result, label: '' } : { url: ev.target?.result })
  }
  reader.readAsDataURL(file)
}
function removeImg(arr:any, idx:any) {
  arr.splice(idx, 1)
}
function handleSupplierImgUpload(e:any, sidx:any) {
  const file = e.raw
  const reader = new FileReader()
  reader.onload = ev => {
    supplierList.value[sidx].imgs.push({ url: ev.target?.result, label: '' })
  }
  reader.readAsDataURL(file)
}
function removeSupplierImg(sidx:any, idx:any) {
  supplierList.value[sidx].imgs.splice(idx, 1)
}
// 顶部按钮功能占位
function onDelete() {
  ElMessage.info('删除功能')
}
function onEditBase() {
  ElMessage.info('修改基本信息功能')
}
function onExport() {
  ElMessage.info('导出溯源码功能')
}
</script>

<style scoped>
.deep-process-detail {
  background: #fff;
  padding: 32px 32px 24px 32px;
  border-radius: 8px;
  margin: 24px;
}
.top-info {
  margin-bottom: 16px;
}
.main-img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #eee;
}
.product-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}
.product-meta {
  font-size: 15px;
  color: #333;
  margin-bottom: 8px;
}
.top-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.section {
  margin-bottom: 24px;
}
.section-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 16px;
}
.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.blue-title {
  color: #1976d2;
  font-weight: bold;
  font-size: 16px;
}
.deep-info-row, .company-info-row {
  display: flex;
  gap: 48px;
  margin-bottom: 16px;
}
.deep-info-col, .company-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-item {
  font-size: 15px;
  color: #222;
  margin-bottom: 2px;
}
.info-label {
  color: #888;
  min-width: 80px;
  display: inline-block;
}
.img-list {
  display: flex;
  align-items: center;
  gap: 16px;
}
.img-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img-thumb {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #eee;
  background: #fafafa;
}
.img-label {
  margin-top: 4px;
  width: 80px;
  text-align: center;
}
.img-upload {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  background: #fafafa;
}
.img-upload-btn {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #bbb;
  border-radius: 4px;
  border: 1px dashed #d9d9d9;
  background: #fafafa;
}
.img-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: pointer;
  font-size: 18px;
  color: #f56c6c;
  z-index: 2;
}
.tab-section {
  margin-bottom: 24px;
}
.tabs {
  margin-top: 16px;
}
</style> 